<template>
	<view class="budget-quota-list">
		<view class="header" v-if="showDocument">
			<wd-navbar title="项目报价" left-arrow @click-left="handleClickLeft"></wd-navbar>
			<template v-if="config.status == 1">
				<view class="header_left" :style="leftZ" @click="tabValuechange(1)">
					<image style="height: 100%; width: 55vw" src="@/static/image/left.png" v-if="tabValue == 1"></image>
					<image style="height: 100%; width: 55vw" src="@/static/image/lefttwo.png" v-if="tabValue == 2"></image>
					<view class="header_title" :class="tabValue == 1 ? 'selected' : 'unselected'">我的项目报价</view>
				</view>
				<view class="header_right" :style="rightZ" @click="tabValuechange(2)">
					<image style="height: 100%; width: 55vw" src="@/static/image/right.png" v-if="tabValue == 1"></image>
					<image style="height: 100%; width: 55vw" src="@/static/image/righttwo.png" v-if="tabValue == 2"></image>
					<view class="header_title" :class="tabValue == 2 ? 'selected' : 'unselected'">全部单项报价</view>
				</view>
			</template>
		</view>
		<view class="scrollheadr" :class="{ 'not-tabs': config.status == 2 }" v-if="!showDocument">
			<wd-navbar title="项目报价" left-arrow @click-left="handleClickLeft"></wd-navbar>
			<template v-if="config.status == 1">
				<view class="scrollheadr_title">
					<view class="scrollheadr_title_left">
						<view class="scrollheadr_title_text" :style="tabValue == 1 ? 'color: #007DFF;' : 'color: #333333;'" @click="tabValuechange(1)">我的项目报价</view>
					</view>
					<view class="scrollheadr_title_center"></view>
					<view class="scrollheadr_title_right">
						<view class="scrollheadr_title_text" :style="tabValue == 1 ? 'color: #333333;' : 'color: #007DFF;'" @click="tabValuechange(2)">全部单项报价</view>
					</view>
				</view>
			</template>
		</view>

		<view class="header_serch" :class="{ 'not-tabs': config.status == 2, 'is-top': !showDocument }">
			<view class="header_serch_left">
				<wd-drop-menu>
					<wd-drop-menu-item
						:title="toptitle"
						v-model="topvalue"
						:options="option"
						@change="hanldChangevaliue"
						icon="https://51-jzt-dev.oss-cn-hangzhou.aliyuncs.com/CRM/dakai-03a89399d949594103597d4dd0769c89c207.png"
						icon-size="32px"
					/>
				</wd-drop-menu>
			</view>
			<!-- 	<view class="header_serch_right">
					<wd-search v-model="serchValue" @blur="blur" @search="search" @clear="clear" maxlength="10" hide-cancel
					placeholder="请输入名称、关键词" placeholder-left />
			</view> -->
		</view>
		<!-- showDocument-是否置顶;config.status-1 客户可见以上模板的所有商品定额清单明细定价表, 2 客户只可见自身签订的合同对应明细清单的定价表 -->
		<view
			class="content_center"
			:style="
				showDocument == true && config.status == 2
					? 'height: calc(100% - 562rpx);'
					: config.status == 1 && showDocument == true
					? 'height: calc(100vh - 705rpx)'
					: showDocument == false && config.status == 2
					? 'height: calc(100vh - 291rpx)'
					: 'height: calc(100vh - 351rpx)'
			"
		>
			<view class="content_left">
				<scroll-view @scroll="onScroll" scroll-y style="height: 100%">
					<view
						v-for="(item, index) in leftselect"
						@click="onselectionchange(item, index)"
						class="content_left_item"
						:class="{
							content_left_selectitem: item.show,
							selectfirst: activeIndex - 1 == index,
							selectend: activeIndex + 1 == index
						}"
					>
						<view :class="item.show == true ? 'content_left_selectshow' : ''"></view>
						<view class="content_left_itemcontent">
							{{ item.label }}
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="content_right">
				<view class="content_right_top" v-if="tabValue == 2">
					<view class="content_right_titletext" :style="showRighttitle == true ? 'color: #3D3D3D;' : 'color: #86909C;'" @click="showRighttitle = true">商品</view>
					<view class="content_right_titletext" :style="showRighttitle == true ? 'color: #86909C;' : 'color: #3D3D3D;'" @click="showRighttitle = false">综合</view>
				</view>
				<view v-if="showRighttitle == true">
					<view v-for="item in spaceQuotaList" @click="onShopclick(item)">
						<view class="content_right_item" :style="[[4, 5, 8, 2].includes(item.quotaType) ? '' : 'height:82rpx;']">
							<image class="pictute_item" mode="aspectFit" :src="item.picUrls?.split(',')[0] || ''" v-if="item.quotaType == 4 || item.quotaType == 5"></image>
							<!-- 	<view class="pictute_item" v-if="item.quotaType !== 4 && item.quotaType !== 5">
							</view> -->
							<view class="content_right_center">
								<view class="content_center_text" :style="[[4, 5].includes(item.quotaType) ? 'width:280rpx' : '']">
									{{ item.quotaName }}
								</view>
								<view
									class="content_center_texttwo"
									v-if="
										(tabValue == 1 && item.quotaType == 2) ||
										(tabValue == 1 && item.quotaType == 4) ||
										(tabValue == 1 && item.quotaType == 5) ||
										(tabValue == 1 && item.quotaType == 8)
									"
								>
									{{ item.projectVal || 0 }}{{ item.shop_unit || '件' }} 丨 ¥{{ item.unitTotalMoney }}/{{ item.shop_unit || '件' }}
								</view>
							</view>
							<view class="content_right_totle" v-if="tabValue == 1" :style="[[4, 5, 8, 2].includes(item.quotaType) ? '' : 'height:82rpx;top:18rpx']">
								¥{{ item.projectTotalMoney }}
							</view>
							<view
								class="content_right_totle"
								v-if="tabValue == 2"
								:style="[[4, 5, 8].includes(item.quotaType) ? '' : [1].includes(item.quotaType) ? 'height:82rpx;top:18rpx' : 'top:39rpx']"
							>
								¥{{ item.quoteTotalMoney }}
							</view>
						</view>
						<view class="content_right_itemline"></view>
					</view>
				</view>

				<view v-if="showRighttitle == false">
					<view class="content_comple_top">
						<view class="content_comple_topleft">备注：</view>
						<view class="content_comple_topright">拆墙前期明确拆墙位置</view>
					</view>

					<view class="content_comple_title">
						<view class="content_comple_titlele">综合项</view>
						<view class="content_comple_titleleri">房屋测量总面积：{{ detaildata.houseArea }}㎡</view>
					</view>

					<view class="wd_table_head">
						<wd-row>
							<wd-col :span="9">项目名称</wd-col>
							<wd-col :span="9">关联报价</wd-col>
							<wd-col :span="6">单位</wd-col>
						</wd-row>
					</view>
					<view class="wd_table_body" v-for="item in comprehensiveList">
						<wd-row>
							<wd-col :span="9">{{ item.itemName }}</wd-col>
							<wd-col :span="9">{{ item.linkTypesDesc }}</wd-col>
							<wd-col :span="6">元</wd-col>
						</wd-row>
					</view>

					<view class="content_public_title">管理费：{{ detaildata.manageFee }}</view>
					<view class="content_public_text">管理费=预算汇报表中的不含税造价x管理费率</view>
					<view class="content_public_title">税金费：{{ detaildata.taxesFee }}</view>
					<view class="content_public_text">税金=(预算汇报表中的不含税价+综合项+管理费)x税率</view>
					<view class="content_line"></view>

					<view class="content_downtitle">预算汇总单</view>
					<view class="wd_table_head">
						<wd-row>
							<wd-col :span="8">分类名称</wd-col>
							<wd-col :span="16">计算明细</wd-col>
						</wd-row>
					</view>
					<view class="wd_table_body">
						<wd-row v-for="item in summarydata">
							<wd-col :span="8" v-if="item.itemName !== '综合项'">{{ item.typeName }}</wd-col>
							<wd-col :span="16" v-if="item.itemName !== '综合项'">
								<view class="table_row_colconent">{{ item.description }}</view>
							</wd-col>
							<wd-col :span="24" v-if="item.itemName === '综合项'">
								<view class="table_row_col">{{ item.itemName }}</view>
							</wd-col>
						</wd-row>
					</view>

					<view class="table_foot">
						<view class="table_foot_text">定额总数：{{ detaildata.quotaNum }}项</view>
						<view class="table_foot_text">材料总数：{{ detaildata.productNum }}项</view>
						<view class="table_foot_text">综合项总数：{{ detaildata.comprehensiveNum }}项</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { getContractList, getBudgetdetail, getSummary, getBudetTempList, gettemplateDetail, getBudgetQuotation } from '@/api/budgetQuota';

const spaceList = ref([]);
const comprehensiveList = ref([]);
const tabValue = ref('1');
const leftZ = ref('z-index:10;');
const rightZ = ref('z-index:2;');
const toptitle = ref('合同名称');
const tabValuechange = (v) => {
	showDocument.value = true;
	if (v == 1) {
		showRighttitle.value = true;
		getCustomerlist();
	} else {
		getTemcustomerlist();
	}
	tabValue.value = v;
	v == 1 ? (leftZ.value = 'z-index:10;') : (leftZ.value = 'z-index:1;');
};
const customerId = uni.getStorageSync('userInfo').customerId;
const tenantId = uni.getStorageSync('userInfo').tenantId;
const handleClickLeft = () => {
	uni.removeStorage({
		key: 'yourKey',
		success: function () {
			console.log('数据已删除');
		}
	});
	uni.navigateTo({
		url: '/pages/user/user'
	});
};

const topvalue = ref();
const option = ref([]);
const spaceQuotatitle = ref('');
const detaildata = ref({});
const leftselect = ref([]);
const spaceQuotaList = ref([]);
const summarydata = ref({});
const serchValue = ref('');
const showDocument = ref(true);
const spaceTotalMoney = ref();
const activeIndex = ref();
const blur = () => {
	console.log('失焦');
};
const search = () => {
	console.log('搜索');
};
const clear = () => {
	console.log('重置');
};
const showRighttitle = ref(true);

const onScroll = (event) => {
	if (event.detail.scrollTop > 260) {
		showDocument.value = false;
	} else {
		showDocument.value = true;
	}
};
//选择空间
const onselectionchange = (item, index) => {
	activeIndex.value = index;
	spaceQuotaList.value = item.spaceQuotaList;
	spaceTotalMoney.value = leftselect.value[index].spaceTotalMoney;
	leftselect.value.map((item) => {
		item.show = false;
	});
	leftselect.value[index].show = true;
	spaceQuotatitle.value = leftselect.value[index].label;
};
//选择定额
const onShopclick = (item) => {
	item.spaceQuotatitle = spaceQuotatitle.value;
	item.tabValue = tabValue.value;
	const encodedData = encodeURIComponent(JSON.stringify(item));
	if (item.quotaType == 4 || item.quotaType == 5 || item.quotaType == 8) {
		uni.navigateTo({
			url: `/pages/budgetQuota/shop/index?data=${encodedData}`
		});
	} else {
		uni.navigateTo({
			url: `/pages/budgetQuota/detail/index?data=${encodedData}`
		});
	}
};
//获取合同列表
const getCustomerlist = async () => {
	option.value = [];

	leftselect.value = [];
	spaceQuotaList.value = [];
	topvalue.value = null;
	toptitle.value = '';

	let obj = {
		customerId: customerId,
		tenantId: tenantId
	};
	const { data } = await getContractList(obj);
	option.value = data.map((item) => {
		return {
			label: item.budgetName,
			value: item.budgetId
		};
	});
	toptitle.value = option.value[0]?.label;
	topvalue.value = option.value[0]?.value;
	if (topvalue.value) {
		getdetail(option.value[0]?.value);
	}
	// getSummaryall(option.value[0].value);
};

//查询当前合同对应所有的模板信息
const getTemcustomerlist = async () => {
	option.value = [];

	leftselect.value = [];
	spaceQuotaList.value = [];
	topvalue.value = null;
	toptitle.value = '';

	let obj = {
		customerId: customerId,
		tenantId: tenantId
	};
	const { data } = await getBudgetQuotation(obj);
	option.value = data.map((item) => {
		return {
			label: item.budgetName,
			value: item.templateId
		};
	});
	toptitle.value = option.value[0]?.label;
	topvalue.value = option.value[0]?.value;
	if (topvalue.value) {
		gettemDetail(option.value[0]?.value);
	}
	// getSummaryall(option.value[0].value)
};
//预算报价模板详情
const gettemDetail = async (templateId) => {
	const { data } = await gettemplateDetail(templateId);
	spaceList.value = data.spaceList;
	detaildata.value = data;
	comprehensiveList.value = data.comprehensiveList;
	summarydata.value = data.collectorList;

	leftselect.value = spaceList.value.map((item) => {
		return {
			show: false,
			label: item.spaceName,
			spaceQuotaList: item.quotaList
		};
	});
	leftselect.value[0].show = true;
	onselectionchange(leftselect.value[0], 0);
};

const hanldChangevaliue = (event) => {
	toptitle.value = event.selectedItem.label;
	if (tabValue.value == 1) {
		getdetail(event.value);
	} else {
		gettemDetail(event.value);
	}
};
//获取报价单详情
const getdetail = async (budgetId) => {
	const { data } = await getBudgetdetail(budgetId);
	spaceList.value = data.spaceList;
	detaildata.value = data;
	comprehensiveList.value = data.comprehensiveList;
	leftselect.value = spaceList.value.map((item) => {
		return {
			show: false,
			label: item.spaceName,
			spaceQuotaList: item.spaceQuotaList,
			spaceTotalMoney: item.spaceTotalMoney
		};
	});
	leftselect.value[0].show = true;
	onselectionchange(leftselect.value[0], 0);
};
//获取报价单预算汇总
const getSummaryall = async (budgetId) => {
	const { data } = await getSummary(budgetId);
	summarydata.value = data;
};

const config = ref({});
onLoad(() => {
	config.value = uni.getStorageSync('config');
	getCustomerlist();
	uni.getStorage({
		key: 'yourKey',
		success: function (res) {
			console.log('获取的数据为：', res.data);
		},
		fail: function () {
			if (customerId !== null) {
				getCustomerlist();
			}
		}
	});
});
</script>

<style lang="scss" scoped>
@import 'index';
</style>
